<template>
  <div class="page-container">
    <div class="common-content">
      <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
      <div class="search-wrap">
        <el-form
          :inline="true"
          :model="searchFilters"
          :size="searchSize"
          ref="searchFilters"
          label-position="right"
        >
          <el-row class="search-input">
            <el-form-item label="供应商范围编码：">
              <el-input v-model="searchFilters.rangeCode" placeholder="请输入供应商范围编码"></el-input>
            </el-form-item>
            <el-form-item label="供应范围名称：">
              <el-input v-model="searchFilters.rangeName" placeholder="请输入供应范围名称"></el-input>
            </el-form-item>
            <el-form-item prop="status" label="状态：">
              <el-select v-model="searchFilters.status" placeholder="状态" style="width:215px">
                <el-option label="待审核" value="0"></el-option>
                <el-option label="审核通过" value="1"></el-option>
                <el-option label="审核拒绝" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <!-- 搜索区域按钮-查询,重置 -->
          <div class="tool-wrap">
            <el-row class="search-button">
              <el-form-item>
                <el-button type="primary" size="small" @click="findPage()" icon="el-icon-search">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  size="small"
                  @click="resetForm('searchFilters')"
                  icon="el-icon-refresh"
                >重置</el-button>
              </el-form-item>
              <el-form-item>
                <!-- <el-button type="primary" size="small" @click="addForm()" v-if="deptType == 1" icon="el-icon-plus">新增</el-button> -->
                <el-button type="primary" size="small" @click="addForm()" icon="el-icon-plus">新增</el-button>
              </el-form-item>
            </el-row>
          </div>
        </el-form>
        <!-- 表格数据部分 -->
        <div class="table-wrap">
          <el-table
            :data="rangeList"
            v-loading="rangeListLoading"
            style="width:100%;"
            :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
          >
            <el-table-column label="ID" prop="id" align="center"></el-table-column>
            <el-table-column label="供应商范围编码" prop="rangeCode" align="center"></el-table-column>
            <el-table-column label="供应范围名称" prop="rangeName" align="center"></el-table-column>
            <el-table-column label="状态" prop="status" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">待审核</span>
                <span v-if="scope.row.status == 1">审核通过</span>
                <span v-if="scope.row.status == 2">审核拒绝</span>
              </template>
            </el-table-column>
            <el-table-column label="创建日期" prop="createTime" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <!-- <el-button size="mini" type="primary" v-if="scope.row.status != 1 && deptType == 1" @click="handleEdit(scope)">编辑</el-button> -->
                <el-button
                  size="mini"
                  type="primary"
                  v-if="scope.row.status != 1"
                  @click="handleEdit(scope)"
                >编辑</el-button>
                <el-button size="mini" type="info" @click="handleDetail(scope)">查看</el-button>
                <el-button
                  size="mini"
                  type="info"
                  v-if="(scope.row.status == 0 || scope.row.status == 2) && (deptType == 0 || deptType == 2)"
                  @click="handleChangeStatus(scope.row,1)"
                >审核通过</el-button>
                <el-button
                  size="mini"
                  type="info"
                  v-if="scope.row.status == 0 && (deptType == 0 || deptType == 2)"
                  @click="handleChangeStatus(scope.row,2)"
                >审核拒绝</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页栏-->
          <div class="toolbar" style="padding:10px;">
            <el-pagination
              layout="total, prev, pager, next, jumper,sizes"
              @current-change="handlePageChange"
              :current-page="searchFilters.pageNum"
              :page-size="searchFilters.pageSize"
              :total="totalSize"
              style="float:right;"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="handleSizeChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//一.导包区

//二.数据输出区
export default {
  //2.1 注册组件
  components: {},

  //2.2 数据初始化区
  data() {
    return {
      //2.2.1 公共数据初始化
      pageIndex: 0,
      pageSize: 10,
      totalSize: 0, //// 返回数据总条数
      pageRequest: { pageNum: 1, pageSize: 10 }, // 请求数据的参数
      rangeList: [], // 表格列表数据
      searchSize: "mini",
      rangeListLoading: false,
      searchFilters: {
        id: null,
        pageNum: 1,
        pageSize: 10,
        rangeCode: null,
        rangeName: null,
      },
      deptType: localStorage.getItem("deptType"),
    }; //return 完结;
  }, //data()方法 完结;

  //2.3 JavaScript 方法区
  methods: {
    //2.请求列表数据
    findPage() {
      // 传过滤器的参数
      let this_ = this;
      this_.rangeListLoading = true;
      this.utils.request.findSupplierRangeManagePage(
        this_.searchFilters,
        function (res) {
          if (res.code === "0000") {
            this_.rangeList = res.data.rows;
            this_.totalSize = Number(res.data.total);
          } else {
            this_.rangeList = [];
            this_.totalSize = 0;
          }
          this_.rangeListLoading = false;
        }
      );
    },

    // 3.重置搜索框条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.findPage();
    },

    // 4.详情按钮对应的方法(TODO 需要修改路径)
    handleDetail(params) {
      this.$router.push({
        path: "/SupplierRangeManageDetail",
        query: {
          id: params.row.id,
          isView: 1,
        },
      });
    },

    // 4.详情按钮对应的方法(TODO 需要修改路径)
    handleEdit(params) {
      this.$router.push({
        path: "/SupplierRangeManageDetail",
        query: { id: params.row.id },
      });
    },
    //审核
    handleChangeStatus(row, status) {
      this.$confirm("确认审核该供应商范围吗？", "提示", { type: "info" }).then(
        () => {
          this.utils.request.updateSupplierRange(
            { id: row.id, status: status, supplierId: row.supplierId },
            (res) => {
              if (res.code == "0000") {
                this.findPage();
                this.$message({ message: "操作成功！", type: "success" });
              }else if(res.code == "1010"){
                this.$message({ message: res.msg, type: "warning" });
              }
            }
          );
        }
      );
    },

    addForm() {
      this.$router.push({ path: "/SupplierRangeManageDetail" });
    },
    // 5.请求条数发生变化
    handleSizeChange(pageSize) {
      this.searchFilters.pageSize = pageSize;
      this.findPage();
    },

    // 6.请求页数发生变化
    handlePageChange(pageNum) {
      this.searchFilters.pageNum = pageNum;
      this.findPage();
    },
    //==========2.3.1 JavaScript 自定义方法区==========
  },
  //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
  mounted() {
    this.findPage();
  },
};
</script>
<style lang="scss" scoped>
</style>
